<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>学生成绩分析</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="static/layuiadmin/style/admin.css" media="all">
    <style>
        body{background-color: #2c343c}
    </style>
</head>
<body>
<!--templates/table/xscjfx-->
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-useradmin-formlist">
        <div class="layui-inline">
           <span class="agileits_grid">
            <label  style="margin-left: 47px;margin-right: 20px;color: white">班级<i>:</i></label>
              <div class="layui-input-inline">
                <select name="cid" id="cid"></select>
              </div>
            </span>
        </div>
        <div class="layui-inline">
           <span class="agileits_grid">
              <label  style="margin-left: 47px;margin-right: 20px;color: white">学期<i>:</i></label>
                <div class="layui-input-inline">
                  <select name="sid" id="sid"></select>
                 </div>
            </span>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" onclick="serach()">查询</button>
        </div>
</div>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
          <div class="layui-col-md6" id="main"></div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>
<script src="static/layui/layui.js"></script>

  <script type="text/javascript" th:inline="none">
      var myChart;
      var searchdata;

      function serach() {
          var sid = $('#sid').val();
          var cid = $('#cid').val();
          $.ajax({
              url: "/selectzhcjglrender",
              type: "post",
              dataType: "json",
              data: {
                  sidstr: sid,
                  cidstr: cid
              },
              success: function (result) {
                  searchdata = result;
                  render();
              },
              error: function (e) {
                  layer.msg('服务器错误', {icon: 2});
              }
          });
      }
      layui.use(['form','layer','jquery'], function() {
          var form = layui.form
              , layer = layui.layer
              , $ = layui.jquery
          $.ajax({
              url: "/selectxqxxgl",
              type: "post",
              dataType: "json",
              success: function (result) {
                  var optionstring = "<option value='' style='display: none'>"+"请选择"+"</option>";
                  for (var j = 0; j < result.count; j++) {
                      optionstring += "<option value='" + result.data[j].id + "'>" + result.data[j].year + "--" + result.data[j].xq + "</option>";
                  }
                  $("#sid").html(optionstring);
                  form.render('select');
              },
              error: function (e) {
                  layer.msg('服务器错误', {icon: 2});
              }
          });
          $.ajax({
              url: "/selectbj",
              type: "post",
              dataType: "json",
              success: function (result) {
                  var optionstring ="<option value='' style='display: none'>"+"请选择"+"</option>";
                  for (var j = 0; j < result.count; j++) {
                      optionstring += "<option value='" + result.data[j].id + "'>" + result.data[j].bname + "</option>";
                  }
                  $("#cid").html(optionstring);
                  form.render('select');
              },
              error: function (e) {
                  layer.msg('服务器错误', {icon: 2});
              }
          });
      });
      //初始化echarts实例
      function render() {
          var height = document.documentElement.clientHeight;
          var width = document.documentElement.clientWidth;
          var renderdiv = document.getElementById("main");
          renderdiv.style.width = width-60+"px";
          renderdiv.style.height = height-90+"px";
      if (myChart)
          myChart.dispose();
      myChart= echarts.init(renderdiv);
      // 指定图表的配置项和数据
      myChart.setOption({
          backgroundColor: '#2c343c',
          title: {
              text: '学生成绩分析饼状图',
              left: 'center',
              top: 20,
              textStyle: {
                  color: '#ffffff'
              }
          },

          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },

          visualMap: {
              show: false,
              min: 0,
              max: 10,
              inRange: {
                  colorLightness: [0, 1]
              }
          },
          series: [
              {
                  name: searchdata.render.renderdata0.name+'班学生成绩',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '50%'],
                  data: [
                      {value: searchdata.render.renderdata1.num, name: searchdata.render.renderdata1.name},
                      {value: searchdata.render.renderdata2.num, name: searchdata.render.renderdata2.name},
                      {value: searchdata.render.renderdata3.num, name: searchdata.render.renderdata3.name},
                      {value: searchdata.render.renderdata4.num, name: searchdata.render.renderdata4.name},
                      {value: searchdata.render.renderdata5.num, name: searchdata.render.renderdata5.name}
                  ].sort(function (a, b) { return a.value - b.value; }),
                  roseType: 'radius',
                  label: {
                      color: 'rgba(255, 255, 255, 0.3)'
                  },
                  labelLine: {
                      lineStyle: {
                          color: 'rgba(255, 255, 255, 0.3)'
                      },
                      smooth: 0.2,
                      length: 10,
                      length2: 20
                  },
                  itemStyle: {
                      color: '#c23531',
                      shadowBlur: 200,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },

                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                      return Math.random() * 200;
                  }
              }
          ]
      });
  }

</script>
</body>
</html>

